<template>
  <div class="header">
    <div class="header-back iconfont">&#xe629;</div>
    <div class="header-search">
      <span class="iconfont">&#xe860;</span>
      <input type="text" class="search-input" value="输入城市/景点/游玩主题" />
    </div>
      <div class="header-city">
        <router-link to="/city">
          <span>{{ doubleCity }}</span>
          <span class="iconfont header-arrow-icon">&#xe60c;</span>
        </router-link>
      </div>
  </div>
</template>

<script>
  import { mapState, mapGetters } from "vuex"
  export default {
    name: "HomeHeader",
    computed: {
      ...mapState(["city"]),
      ...mapGetters(["doubleCity"])
    }
  };
</script>

<style lang="scss" scoped>

  @import "~styles/variables.scss";

  .header {
    display: flex;
    line-height: .86rem;
    background-color: $bgColor;
    color: #ffffff;
    text-align: center;
    align-items: center;
    > .header-city span {
      color: #FFF;
    }
    > .header-back {
      width: .64rem;
      float: left;
      font-size: .4rem;
    }

    > .header-search {
      background-color: #fff;
      line-height: .64rem;
      margin-left: .2rem;
      padding-left: .2rem;
      border-radius: .1rem;
      flex: 1;
      color: #CCC;
      text-align: left;
        > .search-input {

        }
    }

    > .header-city {
      min-width: 1.04rem;
      padding: 0 .1rem;
      float: left;
      > .header-arrow-icon {
        font-size: .24rem;
      }
    }

  }
</style>